<template>
  <div class="warp">
    <div v-if="isAccount" class="notice">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px" class="login-form">
        <el-row>
          <el-col :span="24">
            <el-form-item label="账号" prop="loginName">
              <el-input v-model="form.loginName" placeholder="请输入账号" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="密码" prop="password">
              <el-input v-model="form.password" show-password placeholder="请输入密码" />
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <div>&nbsp;</div>
            <p></p>
          </el-col>
          <el-col :span="6">
            <!-- <p @click="$router.push('/forgotPass')" style="text-align: center; cursor: pointer;"><span
                style="color: #509D55">忘记密码</span></p> -->
          </el-col>
          <el-col v-if="orgList.length > 0" :span="24">
            <el-form-item label="机构" prop="deptId">
              <el-select filterable v-model="form.deptId" @change="handleLogin" placeholder="请选择" style="width: 100%"
                clearable>
                <el-option v-for="item in orgList" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24" class="flex-center" style="margin-top:20px ">
            <el-button class="btn" type="primary" @click="handleLogin">继 续</el-button>
          </el-col>
          <el-col :span="24" class="flex-center" style="margin-top:20px ">
            <div class="borderLine"></div>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div v-else class="ywtb">
      <el-button  class="btn" type="primary" @click="btn">一网通办登录</el-button>
      <el-button @click="isAccount = true" class="btn btn_bottom">账号密码登录</el-button>
    </div>
  </div>
</template>

<script>
import { setToken } from '@/utils/auth'
import { login } from '@/api/login'
import md5 from 'js-md5'

export default {
  name: "externalComplaintLogin",
  data() {
    return {
      // isAccount: false,
      isAccount: true,
      orgList: [],
      loading: true,
      form: {},
      rules: {
        loginName: [
          { required: true, message: "账号不能为空", trigger: "blur" },
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" }
        ]
      },
      timer: null,
      // TEST123
    };
  },
  created() {
    this.form = {}
    if (this.timer) {
      clearInterval(this.timer)
    }
  },
  methods: {
    handleLogin(e) {
      this.$refs["form"].validate(valid => {
        if (valid) {
          login({
            ...this.form,
            password: md5(this.form.password)
          }).then(res => {
            this.$message.success(res.data.msg)
            if (typeof e === 'string') {
              this.$router.replace({
                path: '/',
                query: {
                  loginToken: res.data.loginToken
                }
              })
            } else {
              if (!res.data.deptList || res.data.deptList.length === 0) {
                this.$router.replace({
                  path: '/',
                  query: {
                    loginToken: res.data.loginToken
                  }
                })
              } else {
                this.orgList = res.data.deptList.map(item => {
                  return {
                    label: `${item.organName} - ${item.deptName}`,
                    value: item.deptId
                  }
                })
              }
            }
          })
        } else {
          console.log('valid', valid)
        }
      })
    },
    btn() {
      location.href = 'https://zwdtuser.sh.gov.cn/uc/naturalUser/jump.do?redirect_uri=https://zhjg.scjgj.sh.gov.cn/newConsumer/msfservice/loginUsers/02a21ef785e24160c9a3db014863a774'
    },
  }
};
</script>

<style scoped lang="scss">

.borderLine {
  width: 100%;
  border-top: 1px #cccccc dashed;
}

.img1 {
  width: 100%;
}

.img2 {
  position: absolute;
  right: 0;
  width: 70%;
  bottom: 0;
}

.ywtb {
  position: absolute;
  top: 60vh;
  left: 0;
  right: 0;
}

.notice {
  position: absolute;
  top: 40%;
  left: 0;
  right: 0;
  width: 800px;
  margin: 0 auto 30px;
  background: #fff;
  border: solid 1px #ccc;
  border-radius: 5px;
  padding: 30px;

  .title {
    font-size: 18px;
    text-align: center;
    margin-bottom: 10px;
  }

  .content {
    margin-bottom: 20px;
    height: 500px;
    overflow-y: scroll;

    p {
      font-size: 14px;
      color: #D9001B;
      line-height: 30px;
    }
  }

  .login-form {
    width: 500px;
    margin: 0 auto;

    .flex-center {
      display: flex;
      align-items: center;
      justify-content: center;
    }

  }
}

.btn {
  cursor: pointer;
  display: block;
  z-index: 2;
  width: 300px;
  height: 40px;
  color: white;
  font-size: 16px;
  border: none;
  border-radius: 10px;
  margin: 0 auto;
}
.btn_bottom{
  color: black;
  border: 1px solid;
  margin: 0 auto;
  margin-top: 12px;
  margin-left: auto !important;
}
</style>
